<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">

        <el-table ref="filterTable" :data="tableData" border style="width: 100%">
          <el-table-column prop="commodityName" label="名称">
          </el-table-column>
          <el-table-column prop="price" label="单价">
          </el-table-column>
          <el-table-column label="数量" >
            <template slot-scope="scope">
              <div class="flex">
                <i class="el-icon-remove" @click="jian(scope)"></i>
                <input type="text" placeholder="请输入" v-model="scope.row.num" style="text-align: center;">
                <i class="el-icon-circle-plus" @click="add(scope)"></i>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between" class="offer">
      <el-col :span="12" class="right">
        应付金额 <span class="money">{{ form.money }}</span> <span class="yuan">元</span>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between" class="btn">
      <el-col class="right">
        <el-button type="primary" @click="tmpVisible=true">新增临时商品</el-button>
        <el-button type="primary" @click="confirm()">确定</el-button>
<!--        <el-button type="primary" @click="confirm(0)">扫码支付</el-button>-->
<!--        <el-button type="danger" @click="confirm(1)">卡内余额结账</el-button>-->
        <el-button @click="cancel">取消</el-button>
      </el-col>
    </el-row>
    <el-dialog title="添加临时商品" :visible.sync="tmpVisible" width="400px" :append-to-body=true>
      <el-form ref="form" :model="tmpform" :rules="tmprules" label-width="80px">
      <el-form-item label="商品名称" prop="productName">
        <el-input v-model="tmpform.productName" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="商品数量" prop="buyNumber">
        <el-input v-model="tmpform.buyNumber"  type="number"  placeholder="请输入商品数量" />
      </el-form-item>
      <el-form-item label="商品价格" prop="money">
        <el-input v-model="tmpform.money"  type="number"  @change="moneyChange" placeholder="请输入商品价格" />
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveTmpForm">确 定</el-button>
        <el-button @click="tmpVisible = false">取 消</el-button>
      </div>

    </el-dialog>
    <el-dialog title="预览账单" :visible.sync="dialogVisible" width="400px" :append-to-body=true>
      <zhangdan :close.sync="dialogVisible"></zhangdan>
    </el-dialog>
    <el-dialog title="预览账单" :visible.sync="dialogVisible" width="400px" :append-to-body=true>
      <zhangdan :close.sync="dialogVisible"></zhangdan>
    </el-dialog>
  </div>
</template>

<script>
import zhangdan from './zhangdan'
import {buyProduct} from "@/api/mahjong/cost";
import {listCommodity} from "@/api/mahjong/commodity";

export default {
  name: "",
  components: { zhangdan },
  props:{
    detail:{}
  },
  data() {
    return {
      tableData: [],
      tmpform:{
        buyNumber:'',
        productName:'',
        money:'',
        payType:'',
        jsonVo:[]
      },
      form:{
        buyNumber:'',
        costTable:'',
        memberId:'',
        orderNumber:'',
        payType:'',
        productId:'',
        roomId:'',
        money:'0',
        productJson:[],
        jsonVo:[]
      },
      dialogVisible: false,
      tmpVisible:false,
      totalPrice:0,
      index:0,
      tmprules: {
        productName: [
          { required: true, message: "商品名称不能为空", trigger: "blur" }
        ],
        buyNumber: [
          { required: true, message: "购买数量不能为空", trigger: "blur" }
        ],
        money: [
          { required: true, message: "价格不能为空", trigger: "blur" }
        ]
      }
    }
  },

  created() {
   this.getData()
   this.form={
        memberId:this.detail.memberId,
        orderNumber:this.detail.orderNumber,
        payType:1,
        jsonVo:[],
        buyType:1,
        money:0,
        productJson:[]
   }
   this.tmpform.memberId=this.detail.memberId;
  },
  methods: {
    numberChange(e){
      this.tmpform.totalmoney=e*this.tmpform.money;
    },
    moneyChange(e){
      this.tmpform.totalmoney=this.tmpform.buyNumber*e;
    },
    getData(){
      listCommodity().then(response => {
        response.rows=response.rows.map(item=>({
          ...item,
          num:0
        }))
        console.log(response.rows)
        this.tableData = response.rows;
      });
    },
    changeMenber(e){
      this.form.memberId=e
    },
    choosePay(e){
      if (this.index === e || e === undefined) {
        return false;
      } else {
        this.index = e;
        if(e==0){
          this.form.payType=1
        }else if(e==1){
          this.form.payType=2
        }else{
          this.form.payType=3
        }
      }
    },

    add(row){
      console.log(row)
      var totalPrice=0,total=0
      this.tableData[row.$index].num++
      this.tableData.map(item=>{
       totalPrice+=item.num*item.price
       total+=item.num

      })
      var obj={
        buyNumber:this.tableData[row.$index].num,
        productId:this.tableData[row.$index].id
       }
       this.form.productJson.push(obj)
       this.form.jsonVo.push(obj)


       let uniqueArr = Array.from(new Set(this.form.productJson.map(JSON.stringify))).map(JSON.parse)
      console.log(this.form.jsonVo)
      this.form.money=totalPrice
      this.form.buyNumber=total
    },
    jian(row){
      if(this.tableData[row.$index].num>0){
        this.tableData[row.$index].num--
        this.form.buyNumber--
        this.form.money-=this.tableData[row.$index].price
        this.form.jsonVo.map((item,index)=>{
          if(item.productId==this.tableData[row.$index].id){
            this.form.jsonVo.splice(index,1)
          }
        })

      }

    },
    cancel() {
      console.log(12312312312);

      this.$emit('update:close', false)
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    open() {
      this.$confirm('暂无标签', '商品标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
    saveTmpForm(){
      this.tmpform.buyType=2;
      this.tmpform.orderNumber=this.detail.orderNumber;
      this.tmpform.jsonVo=[{
        buyNumber: this.tmpform.buyNumber,
        productName: this.tmpform.productName,
        money: this.tmpform.money
      }];
      console.log(this.tmpform);
      buyProduct(this.tmpform).then(response => {
        if(response.code === 200){
          this.$message({message: response.msg, type: 'success'});
          this.$emit("goLoadShop");
          this.tmpVisible = false
        }
      });
    },

    confirm(e) {
      // if(e==0){//扫描支付
      //   if(this.form.payType!=1){//如果不是扫描支付，则提示
      //     this.$message({
      //       message: '请选择线上支付',
      //       type: 'error'
      //     });
      //     return
      //   }
      // }
      buyProduct(this.form).then(response => {
       if(response.code===200){
         this.$message({message: response.msg, type: 'success'});
         this.$emit("goLoadShop");
         this.$emit('update:close', false)
       }
      });
    }
  }
};
</script>
<style>
.el-table-filter .el-checkbox:nth-of-type(2) .el-checkbox__label {

  background: url("../../../assets/image/yinliao.png") no-repeat 20px 3px;
  padding-left: 40px;
}

.el-table-filter .el-checkbox:nth-of-type(3) .el-checkbox__label {

  background: url("../../../assets/image/food.png") no-repeat 20px 3px;
  padding-left: 40px;
}

.el-table-filter .el-checkbox:nth-of-type(4) .el-checkbox__label {

  background: url("../../../assets/image/tea.png") no-repeat 20px 3px;
  padding-left: 40px;
}

.el-table-filter .el-checkbox:nth-of-type(5) .el-checkbox__label {

  background: url("../../../assets/image/xiaochi.png") no-repeat 20px 3px;
  padding-left: 40px;
}

.el-table-filter .el-checkbox:nth-of-type(1) .el-checkbox__label {

  background: url("../../../assets/image/yan.png") no-repeat 20px 3px;
  padding-left: 40px;
}

.el-table-filter__bottom button {
  padding: 0 10px;
}
</style>
<style scoped rel="stylesheet/scss" lang="scss">
.on{
    border: 1px solid #26CE41;
}
.null {
  text-align: center;
  color: #9C9186;
  font-size: 18px;
}
.flex{
  text-align: center;
}

.wanjia {
  text-align: right;
  margin-bottom: 15px;

  li {
    display: inline-block;
    width: 105px;
    height: 40px;
    line-height: 40px;
    background-color: #EBEEF5;
    text-align: center;
    border-radius: 2px;
    color: #9C9186;
    margin-left: 5px;
    cursor: pointer;

    span {
      color: #CAAB62;
    }

    &:hover,
    &:active,
    &:visited {
      background-color: #CAAB62;
      color: #fff;

      span {
        color: #FE0000;
      }
    }
  }
}

.add {
  background-color: #EBEEF5;
  color: #9C9186;

  &:visited,
  &:hover,
  &:active {
    background-color: #1085FF;
    color: #fff;
  }
}

.biaoqian {
  background-color: #CAAB62;
  color: #fff;
}

.flex {
  display: flex;
  align-items: center;

  i {
    color: #CAAB62;
    font-size: 20px;
  }

  input {
    font-size: 14px;
    color: #201D1B;
    border: none;
    width: 50px;
    margin-left: 5px;
  }
}

.offer {
  font-size: 18px;
  align-items: center;
  margin: 20px 0;

  .left img {
    vertical-align: text-bottom;
  }

  .left span,
  .right .money {
    color: #EB2B2B;
    font-size: 24px;
  }

  img {
    margin-left: 10px;
  }

  .right {
    text-align: right;

    .yuan {
      color: #9C9186;
    }
  }
}

.btn {
  .right {
    text-align: right;
  }
}
</style>

